<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>人体生物钟设置</title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/app.css" />
	</head>

	<body>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="btn-help">帮助与反馈</a>
				</li>
			</ul>

			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="btn-about">关于人体生物钟</a>
				</li>
			</ul>

			<h5 class="mui-content-padded" style="margin: 30px 10px 10px 10px;">生物钟人员列表(不超过5位)</h5>
			<ul id="userList" class="mui-table-view"></ul>

			<div id="userForm" class="mui-hidden" style="margin-top:30px">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>姓名/昵称</label>
						<input type="text" class="mui-input-speech mui-input-clear" id="name" value="刘玖武">
					</div>
					<div class="mui-input-row">
						<label>生日(公历)</label>
						<input type="text" class="mui-input-clear" id="birthday" value="1981-11-20" readonly="readonly">
					</div>

					<ul class="mui-table-view mui-table-view-radio">
						<li class="mui-table-view-cell mui-selected">
							<a class="mui-navigate-right">男</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">女</a>
						</li>
						<input type="hidden" id="gender" value="男">
					</ul>

					<div class="mui-button-row" style="height: 60px;line-height: 60px;padding-top:10px">
						<input type="hidden" id="oldName">
						<button type="button" class="mui-btn mui-btn-primary" id="btn-save" style="width:100px">保存</button>&nbsp;&nbsp;
						<button type="button" class="mui-btn mui-btn-danger" id="btn-cancel" style="width:100px">取消</button>
					</div>
				</form>
			</div>

			<h5 class="mui-content-padded" style="margin: 30px 10px 10px 10px;">农历生日转公历</h5>
			<div>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>农历生日</label>
						<input type="text" id="birthday1" readonly="readonly">
					</div>
					<div class="mui-input-row">
						<label>公历生日</label>
						<input type="text" id="birthday2" readonly="readonly">
					</div>
				</form>
			</div>
		</div>

		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/template.js"></script>
		<script type="text/javascript" src="../js/calendar.js"></script>
		<script type="text/javascript" src="../js/app.js"></script>
		<script id="user-row-tpl" type="text/html">
			<div class="mui-slider-right mui-disabled">
				<a class="mui-btn mui-btn-yellow js-edit">修改</a>
				<a class="mui-btn mui-btn-red js-del">删除</a>
			</div>
			<div class="mui-slider-handle">
				<div class="mui-table-cell">
					<span style="display:inline-block;width:70px;margin-right:30px">{{name}}</span><span style="margin-right:30px">{{gender}}</span><span>{{birthday}}</span>
				</div>
			</div>
		</script>

		<script type="text/javascript">
			mui.init({
				swipeBack: false
			});
			var isModify = false;

			function clearForm() {
				oldNameBox.value = "";
				nameBox.value = "";
				birthdayBox.value = "";
				genderBox.value = "男";
			}

			function renderData() {
				var userListContainer = document.getElementById("userList");
				userListContainer.innerHTML = "";
				var users = userData(plus.storage.getItem("$userList"));
				for (var i = 0; i < users.length; i++) {
					var user = users[i];
					var userLi = document.createElement("li");
					userLi.setAttribute("id", user.name);
					userLi.className = "mui-table-view-cell";
					userLi.innerHTML = template('user-row-tpl', user);
					userListContainer.appendChild(userLi);
				}
				if (users.length == 0) {
					clearForm();
					userForm.classList.remove("mui-hidden");
				}
			};
			var userForm = document.getElementById("userForm");
			var oldNameBox = document.getElementById('oldName');
			var nameBox = document.getElementById('name');
			var birthdayBox = document.getElementById('birthday');
			var genderBox = document.getElementById('gender');
			mui.plusReady(function() {
				renderData();
				document.getElementById('btn-help').addEventListener('tap', function() {
					plus.webview.getWebviewById("help").show();
				});
				document.getElementById('btn-about').addEventListener('tap', function() {
					plus.webview.getWebviewById("about").show();
				});
				var genderList = document.querySelector('.mui-table-view.mui-table-view-radio');
				genderList.addEventListener('selected', function(e) {
					genderBox.value = e.detail.el.innerText;
				});
				document.getElementById('btn-save').addEventListener('tap', function() {
					var oldName = oldNameBox.value;
					var name = nameBox.value;
					var birthday = birthdayBox.value;
					var gender = genderBox.value;
					if (name.length < 2 || name.length > 4) {
						plus.nativeUI.toast("姓名或昵称长度介于2-4个字");
						return;
					}
					if (!checkDate(birthday)) {
						plus.nativeUI.toast("请选择生日");
						return;
					}
					if (gender.length < 1) {
						plus.nativeUI.toast("请选择性别");
						return;
					}
					var user = {
						name: name,
						birthday: birthday,
						gender: gender
					};
					var users = [];
					var userList = plus.storage.getItem("$userList");
					if (userList) {
						users = userData(userList);
						mui.each(users, function(index, item) {
							if (item.name === oldName) {
								users[index] = user;
							}
						});
						if (oldName.length == 0) {
							users.push(user);
						}
					} else {
						users.push(user);
					}
					plus.storage.setItem("$userList", JSON.stringify(users));
					renderData();
					userForm.classList.add("mui-hidden");
					isModify = true;
				});
				mui('#userList').on('tap', '.js-edit', function(event) {
					var elem = this;
					var li = elem.parentNode.parentNode;
					var name = li.getAttribute("id");
					if (name.length < 2) {
						plus.nativeUI.toast("请选择要修改的人员");
					}
					var users = [];
					var userList = plus.storage.getItem("$userList");
					if (userList) {
						users = userData(userList);
					}
					mui.each(users, function(index, item) {
						if (item.name === name) {
							oldNameBox.value = item.name;
							nameBox.value = item.name;
							birthdayBox.value = item.birthday;
							genderBox.value = item.gender;
							userForm.classList.remove("mui-hidden");
						}
					});
					mui.swipeoutClose(li);
				});
				mui('#userList').on('tap', '.js-del', function(event) {
					var elem = this;
					var li = elem.parentNode.parentNode;
					mui.confirm('确认删除该条记录？', '删除人员', ['确认', '取消'], function(e) {
						if (e.index == 0) {
							var name = li.getAttribute("id");
							var users = [];
							var userList = plus.storage.getItem("$userList");
							if (userList) {
								users = userData(userList);
							}
							var newUsers = [];
							mui.each(users, function(index, item) {
								if (item.name != name) {
									newUsers.push(item);
								}
							});
							if (newUsers) {
								plus.storage.setItem("$userList", JSON.stringify(newUsers));
								renderData();
							}
						} else {
							setTimeout(function() {
								mui.swipeoutClose(li);
							}, 0);
						}
					});
					isModify = true;
				});
				document.getElementById("birthday").addEventListener('tap', function() {
					var oldBirthday = birthdayBox.value;
					var initDate = new Date();
					initDate.setFullYear(1981, 10, 20);
					if (checkDate(oldBirthday)) {
						initDate = new Date(oldBirthday);
					}
					var minDate = new Date();
					minDate.setFullYear(1930, 0, 1);
					var maxDate = new Date();
					plus.nativeUI.pickDate(function(e) {
						var d = e.date;
						var m = (d.getMonth() + 1);
						m = m < 10 ? "0" + m : m;
						var dy = d.getDate();
						dy = dy < 10 ? "0" + dy : dy;
						birthdayBox.value = d.getFullYear() + "-" + m + "-" + dy;
					}, function(e) {}, {
						title: "请选择生日(阳历)",
						date: initDate,
						minDate: minDate,
						maxDate: maxDate
					});
				});
				document.getElementById('btn-cancel').addEventListener('tap', function() {
					clearForm();
					userForm.classList.add("mui-hidden");
				});
				window.addEventListener('addUser', function(event) {
					var userList = plus.storage.getItem("$userList");
					if (userList) {
						var users = userData(userList);
						if (users.length >= 5) {
							plus.nativeUI.toast("生物钟人员列表最多5位");
							return;
						}
					}
					clearForm();
					userForm.classList.remove("mui-hidden");
				});
				window.addEventListener('goHome', function(event) {
					plus.webview.getLaunchWebview().show();
					if (isModify) {
						isModify = false;
						plus.webview.getWebviewById('psi').reload();
					}
				});
				
				var birthday1Box  = document.getElementById("birthday1");
				var birthday2Box  = document.getElementById("birthday2");
				document.getElementById("birthday1").addEventListener('tap', function() {
					var initDate = new Date();
					initDate.setFullYear(1981, 10, 20);
					
					var minDate = new Date();
					minDate.setFullYear(1930, 0, 1);
					var maxDate = new Date();
					plus.nativeUI.pickDate(function(e) {
						var d = e.date;
						var m = (d.getMonth() + 1);
						m = m < 10 ? "0" + m : m;
						var dy = d.getDate();
						dy = dy < 10 ? "0" + dy : dy;
						birthday1Box.value = d.getFullYear() + "-" + m + "-" + dy;
						var bs = birthday1Box.value.split("-");
						var lunar = calendar.lunar2solar(parseInt(bs[0]), parseInt(bs[1]), parseInt(bs[2]));
						birthday2Box.value = lunar.cYear+"-"+lunar.cMonth+"-"+lunar.cDay;
					}, function(e) {}, {
						title: "请选择农历(阴历)生日",
						date: initDate,
						minDate: minDate,
						maxDate: maxDate
					});
				});
			});
			
			
		</script>
	</body>

</html>